<template>
	<view class="copyright-item-box" @click="gotoDetail()">
		<image :src="info.sku_image" mode="scaleToFill" class="banner"></image>
		<view class="info">
			<view class="title">{{info.sku_name}}</view>
			<view class="des">{{info.introduction || '暂无简介'}}</view>
			<view class="author">作者：{{info.site_name || '佚名'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default() {
					return {};
				}
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			gotoDetail() {
				this.$Router.push({
					path:'/publicPages/activity/xinyoupin-detail',
					query:{
						id:this.info.sku_id
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.copyright-item-box {
		width: 734rpx;
		height: 273rpx;
		margin: 0 auto;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
		padding: 40rpx 30rpx 30rpx 16rpx;
		overflow: hidden;
		.banner {
			float: left;
			width: 196rpx;
			height: 196rpx;
			margin-right: 28rpx;
			border-radius: 20rpx;
		}
		.info {
			width: 372rpx;
			height: 196rpx;
			float: left;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			.title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 900;
				color: #222222;
				line-height: 42rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
			.des {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 32rpx;
			}
			.author {
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 42rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
</style>
